<template>
	<el-dialog :title="title" :visible="pickInteraction.status" width="640px" :before-close="handleCancel" class="interact">
		<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
			<el-tab-pane :name="item.title" v-for="(item,key) in tab_btn" :key="key">
				<span slot="label" :style="{backgroundColor:item.color}">{{item.title}}</span>
			</el-tab-pane>
		</el-tabs>

		<el-form ref="form" label-width="100px" :label-position="labelPosition">
			<el-form-item label="按钮名称">
				<el-input v-model="form.name" clearable v-if="!iscustom"></el-input>
				<div v-else>
					<img :src="form.name" class="btn-img">
					<el-button type="primary" @click="showCustomDialog" class="change-btn">更换图片</el-button>
				</div>

			</el-form-item>
			<!-- 链接 -->
			<el-form-item v-if="pickInteraction.type=='link'" label="场景页面">
				<el-select v-model="form.page">
					<el-option :label="item" :value="index" v-for="(item,index) in pages" :key="index"></el-option>
				</el-select>
			</el-form-item>
			<!-- 电话 -->
			<el-form-item v-else-if="pickInteraction.type=='phone'" label="手机/电话">
				<el-input type="text" :placeholder='form.phone' v-model="form.resource" clearable></el-input>
			</el-form-item>
			<!-- 音效 -->
			<el-form-item v-else label="音效">
				<el-button type="primary" @click="set_music_effect">设置音效</el-button>
			</el-form-item>
			<el-form-item label="已选择" v-if="music_url">
				<p>{{music_name}}</p>
			</el-form-item>
		</el-form>
		<p class="notice-p" style="color: orangered;position: absolute;top: 220px;left: 243px;">{{message}}</p>
		<span slot="footer" class="dialog-footer">
			<el-button size="mini" @click="handleCancel">取 消</el-button>
			<el-button size="mini" type="primary" @click="handleConfirm">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	export default {
		name: 'PickInteraction',
		data() {
			return {
				labelPosition: 'right',
				activeName: '点我购买',
				form: {
					name: '点我购买',
					page: '无',
				},
				tab_btn: [{
						title: '点我购买',
						color: "#ff6b63"
					},
					{
						title: '点开继续',
						color: "#ffbd4f"
					},
					{
						title: '马上购买',
						color: "#49ccb0"
					},
					{
						title: '关注我们',
						color: "#8898b7"
					},
					{
						title: '自定义',
						color: "#5c7aff"
					}
				],
				page_number: [],
				music_url: "",
				color: '#ff6b63',
				iscustom: false,
				message: '',
				music_name: '',
				title: "链接组件"
			}
		},
		computed: {
			pickInteraction() {
				const interaction = this.$store.getters.pickInteraction
				if (interaction) {
					switch (interaction.type) {
						case 'phone':
							this.tab_btn = [{
									title: '一键拨号',
									color: "#ff6b63"
								},
								{
									title: '热线电话',
									color: "#ffbd4f"
								},
								{
									title: '拨打电话',
									color: "#49ccb0"
								},
								{
									title: '自动拨号',
									color: "#8898b7"
								},
								{
									title: '自定义',
									color: "#5c7aff"
								}
							]
							this.activeName = '一键拨号'
							this.form = {
								name: '一键拨号',
								phone: '010-88888888',
								resource: ''
							}
							this.title = "电话组件"
							break
						case 'music_effect':
							this.tab_btn = [{
									title: '有惊喜',
									color: "#ff6b63"
								},
								{
									title: '听一听',
									color: "#ffbd4f"
								},
								{
									title: '点我听歌',
									color: "#49ccb0"
								},
								{
									title: '播放歌曲',
									color: "#8898b7"
								},
								{
									title: '自定义',
									color: "#5c7aff"
								}
							]
							this.activeName = '有惊喜'
							this.form = {
								name: '有惊喜',
							}
							this.title = "音效组件"
					}
				}
				return interaction
			},
			pages() {
				const page = this.$store.getters.pages
				var pages = ['无']
				for (let item in page) {
					var pageIndex = parseInt(item) + 1
					pages.push('第' + pageIndex + '页')
				}
				return pages
			}

		},
		watch: {
			form: {
				handler(new_val, old_val) {
					this.message = ""
				},
				deep: true
			},
			music_url(new_Val,old_val){
				this.message = ""
			}
		},
		methods: {
			// tab切换
			handleClick() {
				this.form.name = this.activeName //this.tab_btn[this.activeName]
				for (let item of this.tab_btn) {
					if (item.title == this.activeName) {
						this.color = item.color
						break
					}
				}
				this.iscustom = false
				// if (this.activeName === 'custom') {
				if (this.activeName === '自定义') {
					this.showCustomDialog()
				}

			},
			// 取消
			handleCancel() {
				this.$store.commit('SET_INTERACTION', false)
			},
			// 确定
			handleConfirm() {
				this.message = ''
				// if (this.activeName === 'custom') {
				if (this.activeName === '自定义') {
					this.iscustom = true
				}
				var content = {
					url: '',
					name: this.form.name,
					type: this.pickInteraction.type,
					color: this.color,
					iscustom: this.iscustom
				}
				switch (this.pickInteraction.type) {
					case 'link':
						content.url = this.form.page
						if (content.url === '无' || content.url == '0') {
							this.message = "请选择适用的场景"
						}
						break
					case 'phone':
						content.url = this.form.resource
						if (content.url === '') {
							this.message = "请输入电话号码"
						} else {
							var isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
							var isMob = /^1[34578]\d{9}$/;
							this.message = "请输入正确格式的手机号码或电话号码"
							if (isMob.test(content.url) || isPhone.test(content.url)) {
								this.message = ""
							}
						}
						break
					case 'music_effect':
						content.url = this.music_url
						if (content.url === '') {
							this.message = "请设置音效"
						}
						break
				}
				if (this.message === '') {
					this.pickInteraction && this.pickInteraction.callback && this.pickInteraction.callback(content)
					this.handleCancel()
				}
			},
			showCustomDialog() {
				this.$store.commit('IMAGE_LIBRAY', {
					status: true,
					type: 'btn',
					cropperImg: false,
					callback: (result) => {
						this.form.name = result.url
						this.iscustom = true
					}
				})
			},
			set_music_effect() {
				this.$store.commit('SET_PICK_BGM', {
					status: true,
					isEffect: true,
					callback: (bgm) => {
						this.music_name = bgm.name
						this.music_url = bgm.src
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
